<template>
  <div class="album">
    <h1>数字专辑榜</h1>
    <el-tabs v-model="activeName" @tab-click="getTypeBoard">
      <el-tab-pane label="日榜" name="daily">
        <table class="albums" cellpadding="0" cellspacing="0">
          <tr v-for="(item,i) in tableData" :key="i" :class="(i+1)%2==0?bgcolor.color2:bgcolor.color1">
            <td class="albumimg"><img :src="item.coverImg" :alt="item.name" @click="toAlbumDetails(item.id)"></td>
            <td>{{i+1}}</td>
            <td class="name" @click="toAlbumDetails(item.id)">{{item.name}}</td>
            <td class="songer">{{item.songer}}</td>
          </tr>
        </table>
      </el-tab-pane>

      <el-tab-pane label="周榜" name="week">
        <table class="albums" cellpadding="0" cellspacing="0">
          <tr v-for="(item,i) in tableData" :key="i" :class="(i+1)%2==0?bgcolor.color2:bgcolor.color1">
            <td class="albumimg"><img :src="item.coverImg" :alt="item.name" @click="toAlbumDetails(item.id)"></td>
            <td>{{i+1}}</td>
            <td class="name" @click="toAlbumDetails(item.id)">{{item.name}}</td>
            <td class="songer">{{item.songer}}</td>
          </tr>
        </table>
      </el-tab-pane>

      <el-tab-pane label="年榜" name="year">
        <table class="albums" cellpadding="0" cellspacing="0">
          <tr v-for="(item,i) in tableData" :key="i" :class="(i+1)%2==0?bgcolor.color2:bgcolor.color1">
            <td class="albumimg"><img :src="item.coverImg" :alt="item.name" @click="toAlbumDetails(item.id)"></td>
            <td>{{i+1}}</td>
            <td class="name" @click="toAlbumDetails(item.id)">{{item.name}}</td>
            <td class="songer">{{item.songer}}</td>
          </tr>
        </table>
      </el-tab-pane>

      <el-tab-pane label="总榜" name="total">
        <table class="albums" cellpadding="0" cellspacing="0">
          <tr v-for="(item,i) in tableData" :key="i" :class="(i+1)%2==0?bgcolor.color2:bgcolor.color1">
            <td class="albumimg"><img :src="item.coverImg" :alt="item.name" @click="toAlbumDetails(item.id)"></td>
            <td>{{i+1}}</td>
            <td class="name" @click="toAlbumDetails(item.id)">{{item.name}}</td>
            <td class="songer">{{item.songer}}</td>
          </tr>
        </table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getAlbumBoard } from "../../../network/home"

export default {
  name: "AlbumBoard",
  data() {
    return {
      activeName: 'daily',
      //要遍历的专辑
      tableData: [],
      //存放被搜索到的专辑
      albumList: [],
      //添加背景样式
      bgcolor: { color1: "white", color2: "grey" },
    };
  },
  created() {
    this.getAlbumBoard(this.activeName, 0);
  },
  methods: {
    getTypeBoard() {
      this.getAlbumBoard(this.activeName, 0);
    },
    getAlbumBoard(type, albumType) {
      getAlbumBoard(type, albumType).then(res => {
        switch (type) {
          case "daily":
            this.albumList = res.data.products.slice(0, 5);
            this.tableData = [];
            for (let i = 0; i < this.albumList.length; i++) {
              this.tableData.push({
                id: this.albumList[i].albumId,
                coverImg: this.albumList[i].coverUrl,
                name: this.albumList[i].albumName,
                songer: this.albumList[i].artistName,
              });
            }
            break;

          case "week":
            this.albumList = res.data.products.slice(0, 5);
            this.tableData = [];
            for (let i = 0; i < this.albumList.length; i++) {
              this.tableData.push({
                id: this.albumList[i].albumId,
                coverImg: this.albumList[i].coverUrl,
                name: this.albumList[i].albumName,
                songer: this.albumList[i].artistName,
              });
            }
            break;

          case "year":
            this.albumList = res.data.products.slice(0, 5);
            this.tableData = [];
            for (let i = 0; i < this.albumList.length; i++) {
              this.tableData.push({
                id: this.albumList[i].albumId,
                coverImg: this.albumList[i].coverUrl,
                name: this.albumList[i].albumName,
                songer: this.albumList[i].artistName,
              });
            }
            break;

          case "total":
            this.albumList = res.data.products.slice(0, 5);
            this.tableData = [];
            for (let i = 0; i < this.albumList.length; i++) {
              this.tableData.push({
                id: this.albumList[i].albumId,
                coverImg: this.albumList[i].coverUrl,
                name: this.albumList[i].albumName,
                songer: this.albumList[i].artistName,
              });
            }
            break;
        }
      })
    },
    toAlbumDetails(id) {
      this.$router.push({ name: "AlbumDetails", params: { id: id } });
    },
  }
}
</script>

<style scoped>
.album {
  margin: 0px 50px 20px 50px;
}
.album h1 {
  text-align: center;
}
.albums {
  width: 100%;
}
table {
  table-layout: fixed;
}
.albums tr td {
  border-top: 1px solid RGB(235, 238, 245);
  border-bottom: 1px solid RGB(235, 238, 245);
  padding: 12px;
  font-size: 1rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.albums tr:hover {
  background: RGB(245, 247, 250);
}
.albumimg {
  width: 60px;
  height: 60px;
}
.albumimg img {
  width: 100%;
  height: 100%;
}
.name {
  width: 65%;
}
.name:hover {
  color: RGB(64, 158, 255);
}
.songer {
  width: 20%;
}
.songer:hover {
  color: RGB(64, 158, 255);
}
.whtie {
  background: RGB(255, 255, 255);
}
.grey {
  background: RGB(250, 250, 250);
}
</style>